<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>英雄联盟 - 英雄列表</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background-color: #f2f2f7;
    }
    .ios-card {
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
      border-radius: 12px;
      overflow: hidden;
    }
    .status-bar {
      height: 44px;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 50;
      background-color: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .header-area {
      position: fixed;
      top: 44px;
      left: 0;
      right: 0;
      z-index: 40;
      background-color: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      padding: 1rem;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
    }

    .header-area.collapsed {
      padding: 0.5rem 1rem;
    }

    .header-title, .filter-chips {
      transition: all 0.3s ease;
    }

    .header-area.collapsed .header-title,
    .header-area.collapsed .filter-chips {
      max-height: 0;
      opacity: 0;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    .content-area {
      margin-top: 230px;
      padding-bottom: 30px;
      padding-left: 1rem;
      padding-right: 1rem;
      transition: margin-top 0.3s ease;
    }

    .content-area.header-collapsed {
      margin-top: 130px;
    }
    .home-indicator {
      height: 5px;
      width: 36%;
      background-color: #000;
      border-radius: 3px;
      opacity: 0.2;
    }
    .content-area {
      margin-top: 230px;
      padding-bottom: 30px;
      padding-left: 1rem;
      padding-right: 1rem;
    }
    .search-bar {
      background-color: rgba(142, 142, 147, 0.12);
      border-radius: 10px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
    }
    .search-input {
      background: transparent;
      border: none;
      outline: none;
      width: 100%;
      font-size: 17px;
      margin-left: 8px;
    }
    .champion-tag {
      font-size: 10px;
      padding: 2px 8px;
      border-radius: 10px;
      background-color: rgba(0, 122, 255, 0.1);
      color: #007AFF;
    }
    .champion-tag.fighter {
      background-color: rgba(255, 69, 58, 0.1);
      color: #FF453A;
    }
    .champion-tag.tank {
      background-color: rgba(88, 86, 214, 0.1);
      color: #5856D6;
    }
    .champion-tag.mage {
      background-color: rgba(52, 199, 89, 0.1);
      color: #34C759;
    }
    .champion-tag.assassin {
      background-color: rgba(255, 149, 0, 0.1);
      color: #FF9500;
    }
    .champion-tag.support {
      background-color: rgba(175, 82, 222, 0.1);
      color: #AF52DE;
    }
    .champion-tag.marksman {
      background-color: rgba(90, 200, 250, 0.1);
      color: #5AC8FA;
    }
    .difficulty-indicator {
      display: flex;
      gap: 2px;
    }
    .difficulty-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #D1D1D6;
    }
    .difficulty-dot.active {
      background-color: #FF9500;
    }
    .loading {
      display: inline-block;
      width: 24px;
      height: 24px;
      border: 3px solid rgba(0, 0, 0, 0.1);
      border-radius: 50%;
      border-top-color: #007AFF;
      animation: spin 1s ease-in-out infinite;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    .search-results {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background-color: white;
      border-radius: 12px;
      margin-top: 8px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      max-height: 300px;
      overflow-y: auto;
      z-index: 30;
    }
    .search-result-item {
      display: flex;
      align-items: center;
      padding: 10px 15px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
    .search-result-item:last-child {
      border-bottom: none;
    }
    .search-result-item:active {
      background-color: rgba(0, 0, 0, 0.05);
    }
    .champion-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      border: 1px solid rgba(0, 0, 0, 0.1);
    }
    .fade-in {
      animation: fadeIn 0.3s ease-in-out;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .filter-chips {
      display: flex;
      overflow-x: auto;
      padding: 8px 0;
      gap: 8px;
      -webkit-overflow-scrolling: touch;
    }
    .filter-chip {
      padding: 6px 12px;
      border-radius: 16px;
      font-size: 12px;
      white-space: nowrap;
      background-color: rgba(142, 142, 147, 0.12);
      color: #8E8E93;
      transition: all 0.2s ease;
    }
    .filter-chip.active {
      background-color: #007AFF;
      color: white;
    }
    .audio-indicator {
      position: absolute;
      top: 10px;
      right: 10px;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .audio-indicator.playing {
      opacity: 1;
    }
    .champion-image-container {
      position: relative;
      cursor: pointer;
    }
    .champion-image-container:active {
      opacity: 0.8;
    }
    .champion-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    .champion-card {
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      background-color: white;
      position: relative;
    }
    .champion-card-image {
      width: 100%;
      aspect-ratio: 1;
      object-fit: cover;
    }
    .champion-card-info {
      padding: 8px;
      background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
    }
    .champion-card-name {
      color: white;
      font-weight: 600;
      font-size: 14px;
      margin-bottom: 2px;
    }
    .champion-card-title {
      color: rgba(255,255,255,0.8);
      font-size: 10px;
    }
    .champion-card-tags {
      display: flex;
      gap: 4px;
      margin-top: 4px;
    }
  </style>
</head>
<body>
  <!-- iOS 状态栏 - 固定在顶部 -->
  <div class="status-bar flex items-center justify-between px-5 pt-2">
    <div class="text-sm font-semibold">9:41</div>
    <div class="flex space-x-1">
      <i class="fas fa-signal"></i>
      <i class="fas fa-wifi"></i>
      <i class="fas fa-battery-full"></i>
    </div>
  </div>

  <!-- 头部 - 固定在状态栏下方 -->
  <div class="header-area">
    <div class="flex items-center justify-between mb-3 header-title">
      <div class="flex items-center space-x-2">
        <button onclick="window.location.href='projects.html'" class="mr-2 px-3 py-1 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition text-sm">返回</button>
        <div class="w-10 h-10 rounded-full overflow-hidden">
          <img src="https://www.loliapi.com/acg/pp/" alt="头像" class="w-full h-full object-cover" />
        </div>
      </div>
      <h1 class="text-2xl font-bold">英雄联盟</h1>
    </div>
    <!-- 搜索栏 -->
    <div class="search-bar relative">
      <i class="fas fa-search text-gray-500"></i>
      <input type="text" id="searchInput" class="search-input" placeholder="搜索英雄" />
    </div>

    <!-- 筛选标签 -->
    <div class="filter-chips mt-3" id="filterChips">
      <div class="filter-chip active" data-role="all">全部</div>
      <div class="filter-chip" data-role="fighter">战士</div>
      <div class="filter-chip" data-role="assassin">刺客</div>
      <div class="filter-chip" data-role="mage">法师</div>
      <div class="filter-chip" data-role="marksman">射手</div>
      <div class="filter-chip" data-role="support">辅助</div>
      <div class="filter-chip" data-role="tank">坦克</div>
    </div>
  </div>

  <!-- 主内容区 -->
  <div class="content-area">
    <!-- 英雄列表 -->
    <div class="champion-grid" id="championGrid">
      <!-- 英雄卡片将通过JavaScript动态生成 -->
    </div>
  </div>

  <!-- iOS Home Indicator -->
  <div class="fixed bottom-0 left-0 right-0 flex justify-center py-2">
    <div class="home-indicator"></div>
  </div>

  <!-- 音频元素 -->
  <audio id="championAudio" preload="none"></audio>

  <script>
    // 获取DOM元素
    const searchInput = document.getElementById('searchInput');
    const filterChips = document.getElementById('filterChips');
    const championGrid = document.getElementById('championGrid');
    const championAudio = document.getElementById('championAudio');

    // 所有英雄数据
    let allChampions = [];

    // 当前筛选条件
    let currentFilter = 'all';

    // API地址
    const apiUrl = 'https://api-vue-base.itheima.net/api/lol/search';

    // 角色类型映射
    const roleMap = {
      fighter: '战士',
      assassin: '刺客',
      mage: '法师',
      tank: '坦克',
      support: '辅助',
      marksman: '射手'
    };

    // 防抖函数
    function debounce(func, delay) {
      let timer;
      return function(...args) {
        clearTimeout(timer);
        timer = setTimeout(() => {
          func.apply(this, args);
        }, delay);
      };
    }

    // 筛选英雄
    function filterChampions(champions, filter) {
      if (filter === 'all') {
        return champions;
      }
      return champions.filter(champion =>
        champion.roles.some(role => role.toLowerCase() === filter)
      );
    }

    // 搜索英雄
    async function searchChampions(query) {
      try {
        // 显示加载中
        championGrid.innerHTML = `
          <div class="col-span-3 py-8 flex justify-center items-center">
            <div class="loading mr-2"></div>
            <span class="text-gray-500">加载中...</span>
          </div>
        `;

        // 发送请求 - 无论是否有查询词都发送请求
        const response = await fetch(`${apiUrl}?q=${encodeURIComponent(query || '')}`);
        if (!response.ok) {
          throw new Error('网络请求失败');
        }

        const result = await response.json();

        if (result.code !== 200) {
          throw new Error(result.msg || '获取英雄数据失败');
        }

        // 保存所有英雄数据
        allChampions = result.data;

        // 应用筛选
        const filteredChampions = filterChampions(allChampions, currentFilter);

        // 处理搜索结果
        if (filteredChampions.length === 0) {
          championGrid.innerHTML = `
            <div class="col-span-3 py-8 text-center text-gray-500">
              未找到相关英雄
            </div>
          `;
          return;
        }

        // 显示英雄列表
        renderChampionGrid(filteredChampions);

      } catch (error) {
        console.error('搜索英雄出错:', error);
        championGrid.innerHTML = `
          <div class="col-span-3 py-8 text-center text-red-500">
            ${error.message || '加载失败，请稍后再试'}
          </div>
        `;
      }
    }

    // 渲染英雄网格
    function renderChampionGrid(champions) {
      championGrid.innerHTML = champions.map(champion => `
        <div class="champion-card fade-in" data-champion-id="${champion.heroId}">
          <div class="champion-image-container">
            <img src="${champion.icon}" alt="${champion.name}" class="champion-card-image" />
            <div class="audio-indicator" id="audioIndicator-${champion.heroId}">
              <i class="fas fa-volume-up"></i>
            </div>
            <div class="champion-card-info">
              <div class="champion-card-name">${champion.title}</div>
              <div class="champion-card-title">${champion.name}</div>
              <div class="champion-card-tags">
                ${champion.roles.map(role => `
                  <span class="champion-tag ${role.toLowerCase()} text-[8px]">${roleMap[role.toLowerCase()] || role}</span>
                `).join('')}
              </div>
            </div>
          </div>
        </div>
      `).join('');

      // 添加点击事件
      document.querySelectorAll('.champion-card').forEach(card => {
        card.addEventListener('click', (e) => {
          const championId = card.getAttribute('data-champion-id');
          const champion = allChampions.find(c => c.heroId === championId);

          // 如果点击的是音频指示器区域，只播放音频
          if (e.target.closest('.audio-indicator')) {
            if (champion) {
              playChampionAudio(champion, card);
            }
          } else {
            // 否则跳转到详情页
            window.location.href = `hero-detail.html?id=${championId}`;
          }
        });
      });
    }

    // 播放英雄选择音效
    function playChampionAudio(champion, card) {
      if (!champion || !champion.selectAudio) return;

      // 清理URL中的多余空格和引号
      const audioUrl = champion.selectAudio.trim().replace(/['"]/g, '');

      // 设置音频源并播放
      championAudio.src = audioUrl;

      // 显示音频指示器
      const audioIndicator = card.querySelector('.audio-indicator');
      audioIndicator.classList.add('playing');

      // 播放音频
      championAudio.play().catch(error => {
        console.error('播放音频失败:', error);
        audioIndicator.classList.remove('playing');
      });

      // 音频播放结束后隐藏指示器
      championAudio.onended = () => {
        audioIndicator.classList.remove('playing');
      };
    }

    // 监听搜索输入
    searchInput.addEventListener('input', debounce((e) => {
      searchChampions(e.target.value);
    }, 300));

    // 监听筛选点击
    filterChips.addEventListener('click', (e) => {
      const filterItem = e.target.closest('.filter-chip');
      if (!filterItem) return;

      // 更新激活状态
      document.querySelectorAll('.filter-chip').forEach(item => {
        item.classList.remove('active');
      });
      filterItem.classList.add('active');

      // 更新筛选条件
      currentFilter = filterItem.dataset.role;

      // 重新应用筛选
      if (allChampions.length > 0) {
        const filteredChampions = filterChampions(allChampions, currentFilter);

        // 如果筛选后没有英雄，显示提示
        if (filteredChampions.length === 0) {
          championGrid.innerHTML = `
            <div class="col-span-3 py-8 text-center text-gray-500">
              该分类下暂无英雄
            </div>
          `;
        } else {
          // 更新英雄列表
          renderChampionGrid(filteredChampions);
        }
      }
    });

    // 页面加载时获取所有英雄
    document.addEventListener('DOMContentLoaded', () => {
      // 页面加载完成后自动获取所有英雄
      searchChampions('');

      // 添加滚动事件监听
      setupScrollListener();
    });

    // 设置滚动监听
    function setupScrollListener() {
      const headerArea = document.querySelector('.header-area');
      const contentArea = document.querySelector('.content-area');
      let lastScrollTop = 0;

      window.addEventListener('scroll', () => {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

        // 向下滚动超过50px时收起头部
        if (scrollTop > 50 && scrollTop > lastScrollTop) {
          headerArea.classList.add('collapsed');
          contentArea.classList.add('header-collapsed');
        }
        // 向上滚动或回到顶部时展开头部
        else if (scrollTop < 10 || scrollTop < lastScrollTop) {
          headerArea.classList.remove('collapsed');
          contentArea.classList.remove('header-collapsed');
        }

        lastScrollTop = scrollTop;
      });
    }
  </script>
</body>
</html>